<script lang="ts">
	import { page } from '$app/stores';
	import logo from './svelte-logo.svg';
</script>

<header class="header-warp">
	<div class="header">
		<a href="/" class="logo">
			<img src={logo} alt="SvelteKit" />
		</a>
		<nav>
			<div class="nav-item" class:active={$page.path === '/'}>
				<a class="nav-item__link" sveltekit:prefetch href="/">关于我们</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/product'}>
				<a class="nav-item__link" sveltekit:prefetch href="/product">产品</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/news'}>
				<a class="nav-item__link" sveltekit:prefetch href="/news">新闻</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/join'}>
				<a class="nav-item__link" sveltekit:prefetch href="/join">加入我们</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/blog' || $page.path.includes('blog')}>
				<a class="nav-item__link" sveltekit:prefetch href="/blog">博客</a>
			</div>
			<!-- <div class="nav-item" class:active={$page.path === '/about'}>
				<a class="nav-item__link" sveltekit:prefetch href="/about">关于我们</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/todos'}>
				<a class="nav-item__link" sveltekit:prefetch href="/todos">Todos</a>
			</div>
			<div class="nav-item" class:active={$page.path === '/blog'}>
				<a class="nav-item__link" sveltekit:prefetch href="/blog">blog</a>
			</div> -->
		</nav>
	</div>
</header>

<style lang="scss">
.header-warp {
	position: fixed;
	top: 0;
	z-index: 100;
}
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	-webkit-box-pack: justify;
	position: relative;
	top: 0;
	width: 100vw;
	height: 1.8rem;
	background-color: #3c8cff;
	z-index: 100;
	.logo {
		position: relative;
		width: 2.5rem;
		height: .43rem;
		margin-left: 9.3vw;
		img {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
		}
	}
	nav {
		margin-right: 6.7vw;
		.nav-item {
			display: inline-block;
			margin-left: 2vw;
			margin-right: 2vw;
			cursor: pointer;
			color: #fff;
			&.active {
				color: rgb(120, 230, 220);
			}
			&__link {
				font-size: .36rem;
				&:hover,
				&:focus {
					color: rgb(120, 230, 220);
					text-decoration: none;
				}
			}
		}
	}
}
</style>
